<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百易相册</title>
<link rel="icon" href="../img/BaiYi_title_icon.png" />
<link type="text/css" rel="stylesheet" href="../css/foundation.css" />
<link type="text/css" rel="stylesheet" href="../css/baiyi.css" />
<script type="text/javascript" src="../js/vendor/jquery.js"></script>
<script type="text/javascript" src="../js/foundation/foundation.js"></script>
<script type="text/javascript"
	src="../js/foundation/foundation.topbar.js"></script>
<script type="text/javascript"
	src="../js/foundation/foundation.offcanvas.js"></script>
<script type="text/javascript"
	src="../js/foundation/foundation.reveal.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(document).foundation();
		$(document).foundation('topbar', 'reflow');
		$(document).foundation('offcanvas', 'reflow');
		$(document).foundation('revaeal', 'reflow');
	});
</script>
<script type="text/javascript">
	//使用ajax实现对用户进行关注
	$(document).ready(function() {
		//添加关注
		$(".friend").click(function() {
			alert("开始进行关注");
			var id = $(this).attr("id");
			alert("id:" + id);
			$.ajax({
				type : "POST",
				url : "addFriend",
				data : "id=" + id,
				success : function(msg) {
					$(".friend").css("background", "gray");
					
					alert("return message:" + msg);
				}
			});
			$(this).val("已经关注");
			alert("关注成功！");
		});
	});
</script>
</head>
<body>
	<div class="off-canvas-wrap" data-offcanvas>
		<div class="inner-wrap">
			<jsp:include page="nav.jsp"></jsp:include>
			<!-- Off Canvas Menu 显示简易个人信息 -->
			<jsp:include page="user.jsp"></jsp:include>
			<!---------------------弹窗全写在这里了---------------------->
			<!----------------------------------------------------------------------------------------->
			<!---------------------------- 内容区域可替换------------------------------------------------>
			<!----------------------------------------------------------------------------------------->
			<!-----------------------左边的热门相册区域------------------->
			<div class="large-7  medium-7 columns equal_iocn">
				<div style="width: 100%; padding: 10px; float: left;">
					<h2>热门相册</h2>
					<hr />
					<c:if test="${!empty albumHot }">
						<c:forEach items="${ albumHot }" var="album">
							<div class="large-3 medium-6  columns">
								<a href="toOthersAlbum?id=${album.albumId }"><div class="panel">
										<img src="${album.showPhotoPath }" alt="暂无封面">
										<h6>${album.albumName }</h6>
										<h6>访问量：${album.albumHot }</h6>
									</div></a>
							</div>
						</c:forEach>
					</c:if>
				</div>
				<div
					style="width: 100%; padding: 10px; float: left;text-align: center;">
					<c:choose>
						<c:when test="${size eq 0 }">
						</c:when>
						<c:otherwise>
							<c:forEach begin="0" end="${size}" var="show_page">
								<div style="float: left;padding: 5px;">
									<c:if test="${ page == show_page}"> ${ show_page+1 } </c:if>
									<c:if test="${ page != show_page}">
										<a href="getIndexByPage?id=${show_page }">${ show_page+1 }</a>
									</c:if>
								</div>
							</c:forEach>
						</c:otherwise>
					</c:choose>
				</div>
			</div>
			<!--------------------右边的最受欢迎的人的排行榜--------------->
			<div class="large-5 medium-5  columns">
				<h2>用户人气排行</h2>
				<hr />
				<c:if test="${!empty userHot }">
					<c:forEach items="${userHot }" var="user" begin="0" end="0">
						<div class="large-6 medium-5 small-6 columns">
							<h4>
								<a href="toOtherHome?id=${user.userId }">${user.userName }</a>
							</h4>
							<h6 class="subheader">人气值：${user.userHot }</h6>
							<c:choose>
								<c:when test="${flag eq 0 }">
									<button id="${user.userId }" class="friend" style="margin-top:1.25rem;background:gray;" >取消关注</button>
								</c:when>
								<c:otherwise>
									<button id="${user.userId }" class="friend"
										style="margin-top:1.25rem;">加关注</button>
								</c:otherwise>
							</c:choose>

						</div>
						<div class="large-6 medium-7 small-6 columns">
							<img class="effigy" src="${user.userPortrait }" alt="懒人，还没头像">
						</div>
						<hr />
						<div class="row columns">
							<h4>TA的个人简介：</h4>
							<ul>
								<li><p>${user.hobby }</p></li>
								<li>${ user.persionalExplain}</li>
							</ul>
						</div>
					</c:forEach>

					<!--人气王的信息>-->
					<hr />
					<div class="row hot" style="font-size:12px;">
						<h4>其他>></h4>
						<c:forEach items="${userHot }" var="user" begin="1">
							<div class="large-2 medium-3 small-4 columns DelBr">
								<img src="${user.userPortrait }" alt="懒人，还没头像">
								<div class="center">
									<a href="toOtherHome?id=${user.userId }">${user.userName }</a>
									<h6>人气：${user.userHot }</h6>
								</div>
							</div>
						</c:forEach>
					</div>
				</c:if>
			</div>
			<!----------------------------------------------------------------------------------------->
			<!---------------------------- 内容区域------end-------------------------------------------->
			<!----------------------------------------------------------------------------------------->
			<!------------------页脚--------------------->
			<jsp:include page="footer.jsp"></jsp:include>
			<!-- close the off-canvas menu -->
			<a class="exit-off-canvas"></a>
		</div>
	</div>
</body>
</html>